<!--  -->
<template>
  <div class="ly-bg">
    <div class="ly-header">
      <div class="ly-content">
        <div class="ly-logo">

          <img @click="$router.push('/')" src="@/assets/img/logo.png"/>
        </div>
        <div class="ly-menu">
          
          <div class="ly-bg-nav" :class="isShowNav?'ly-mobile-nav':''">
            <div class="ly-bg-btn" @click="isShowNav=false"></div>
            <ul class="ly-nav">
              <li v-for="(item,index) in nav" :class="type===item.url?'ly-action':''" :key="index" :data-type="type"
                  :data-url="item.url">
                <span @click="$router.push({path:'/'+item.url,query:{type:1}})">{{item.title}}</span>
                <img v-if="item.children" src="@/assets/img/icon_down.png" class="ly-img"/>
                <div class="ly-children" v-if="item.children">
                  <p v-for="(page,number) in item.children" :key="number"
                     @click="  goprojece(page)">{{page.typeName}}</p>
                </div>
              </li>
            </ul>
          </div>
          <div class="ly-mobile" v-if="isMobile" @click="isShowNav=true"><img src="@/assets/img/icon_menu.png"/></div>
          <div class="ly-user" v-if="isLogin">
            <div class="ly-info">
              <img src="@/assets/img/icon_user.png"/>
              <span><label title="个人中心" @click="$router.push('/user')">{{userInfo.mobile}}</label><em
                @click="logout">退出</em></span>
            </div>
          </div>
          <div class="ly-user" v-else>
            <div class="ly-info">
              <img src="@/assets/img/icon_user.png"/>
              <span @click="showLogin">注册/登录</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <login ref='loginClean'></login>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》'
  import {mapGetters} from "vuex"
  import login from "@/components/login"
  import {clieentWidth} from "@/utils/clientwidth"
  import {serviceTypeAll} from "@/api/info"

  export default {
    components: {
      login: login
    },
    data() {
      //这里存放数据
      return {
        type: 'home',
        isShow: false, // 是否显示二级
        isMobile: false,  // 是否为小屏
        isShowNav: false, // 是否显示菜单栏 mobile
        nav: [
          {
            title: '首页',
            url: 'home'
          },
          {
            title: '服务项目',
            url: 'project',
            children: []
          },
          {
            title: '商学院',
            url: 'business'
          },
          {
            title: '新闻资讯',
            url: 'news'
          },
          {
            title: '联系我们',
            url: 'contact'
          },
        ],
      }
    },
    //监听属性 类似于data概念
    computed: {
      ...mapGetters(["userInfo", 'isLogin']),
    },
    watch: {
      $route() {
        this.type = this.$route.name
        this.isShowNav = false
      }
    },
    //方法集合
    methods: {
      showChildren() {
        this.isShow = !this.isShow
      },
      // 显示登录框
      showLogin() {
        this.$store.commit('updateShowLoginData', true)

        this.$nextTick(() => {
          this.$refs.loginClean.init(true);
        });
      },
      getcompanyInfo() {
        this.$store.dispatch("get_info")
      },
      // 获取服务列表
      serviceType() {
        serviceTypeAll().then(response => {
          if (response.code === '0000') {
            this.nav[1].children = response.data
            this.$store.commit('updateServiceData', JSON.stringify(response.data))
          }
        })
      },
      // 推出登录
      logout() {
        this.$router.push('/')
        this.$store.commit('updateUserInfoData', false)
      },
      // $router.push({path:'/project',query:{type:page.id}})
      goprojece(item) {

        this.$router.push({path: '/project', query: {type: item.id}})
        this.isShow = false
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.type = this.$route.name
      this.isMobile = clieentWidth()
      this.getcompanyInfo()
      this.serviceType()
    },
  }
</script>
<style lang='scss' scoped>
  @import url("../assets/flex.scss");

  $wid: 6.25;
  .ly-bg {
    width: 100%;
    height: 1.2rem;
  }

  .ly-header {
    width: 100%;
    height: 1.2rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;

    .ly-logo {
      width: 30%;
      height: 1.2rem;
      padding: .2rem 0;
      display: inline-block;
      vertical-align: top;

      img {
        height: .8rem;
        cursor: pointer;
      }
    }

    .ly-menu {
      width: 70%;
      text-align: right;
      display: inline-block;
      vertical-align: top;
      height: 1.2rem;
      padding: .35rem 0;

      .ly-bg-nav {
        display: inline-block;
        vertical-align: top;
        width: 75%;

        .ly-nav {
          width: 100%;
          line-height: .5rem;
          text-align: right;
          padding-right: .3rem;

          li {
            display: inline-block;
            vertical-align: top;
            padding: 0 .1rem;
            margin: 0 .2rem;
            font-size: .18rem;
            position: relative;

            &:hover {
              .ly-children {
                display: block;
              }
            }

            span {
              cursor: pointer;
              display: inline-block;
              vertical-align: top;
            }

            &.ly-action {
              span {
                color: #0767f2;
              }
            }

            .ly-img {
              width: .2rem;
              height: .2rem;
              margin-left: .05rem;
              padding: .05rem;
              margin-top: .15rem;
              cursor: pointer;
            }

            .ly-children {
              width: 120%;
              background: #fff;
              box-shadow: 0 0 .05rem #ccc;
              position: absolute;
              top: .5rem;
              left: -10%;
              z-index: 9999;
              border-radius: .1rem;
              padding: .1rem 0;
              display: none;

              p {
                line-height: .4rem;
                font-size: .14rem;
                text-align: center;
                cursor: pointer;

                &:hover {
                  color: #0767f2;
                }
              }
            }
          }
        }
      }

      .ly-user {
        width: 25%;
        display: inline-block;
        vertical-align: top;
        padding-left: 5%;
        box-sizing: border-box;

        .ly-info {
          width: 80%;
          height: .45rem;
          line-height: .45rem;
          border-radius: 1rem;
          background: #fd5e16;
          text-align: left;
          padding: 0 .15rem 0 .35rem;
          position: relative;
          transition: .3s;

          &:hover {
            background: #0767f2;
          }

          img {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: .45rem;
            height: .45rem;
            padding: .12rem;
          }

          span {
            width: 100%;
            display: block;
            line-height: .45rem;
            text-align: center;
            color: #fff;
            cursor: pointer;
            font-size: .14rem;

            label {
              float: left;
              cursor: pointer;
            }

            em {
              font-size: .1rem;
              margin-left: .05rem;
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 1500px) {
    .ly-header {
      .ly-menu {
        .ly-user {
          width: 20%;
          padding-left: 0;
        }
      }
    }
  }

  @media screen and (max-width: 780px) {
    .ly-bg {
      height: 3rem/$wid;
    }
    .ly-header {
      height: 3rem/$wid;
      padding: 0 .8rem/$wid;
      border-bottom: 1px solid #ccc;

      .ly-logo {
        height: 3rem/$wid;
        width: 20%;
        padding: .5rem/$wid 0;

        img {
          height: 2rem/$wid;
        }
      }

      .ly-menu {
        height: 3rem/$wid;
        padding: .5rem/$wid 0;
        width: 80%;

        .ly-mobile {
          width: 2rem/$wid;
          height: 2rem/$wid;
          background: #0767f2;
          border-radius: 50%;
          position: absolute;
          top: .5rem/$wid;
          right: 40%;
          padding: .5rem/$wid;

          img {
            width: 100%;
          }
        }

        .ly-bg-nav {
          width: 100%;
          position: fixed;
          top: 0;
          right: -100%;
          bottom: 0;
          background: rgba(0, 0, 0, .2);
          z-index: 99999;

          &.ly-mobile-nav {
            right: 0;
          }

          .ly-bg-btn {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
          }

          .ly-nav {
            width: 40%;
            background: #fff;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 22;
            padding: 2rem/$wid 0;

            li {
              line-height: 4rem/$wid;
              width: 100%;
              text-align: center;
              font-size: 1rem/$wid;
            }
          }
        }

        .ly-user {
          height: 2rem/$wid;
          width: 40%;
          padding-left: 0;

          .ly-info {
            height: 2rem/$wid;
            padding: 0 .1rem/$wid;
            line-height: 2rem/$wid;

            &:hover {
              background: #fd5e16;
            }

            label {
              margin-left: .2rem/$wid;
            }

            span {
       
              line-height: 2rem/$wid;
              font-size: .8rem/$wid;
            }

            img {
              display: none;
            }
          }
        }


      }

      .ly-content {
        width: 100%;
      }
    }
  }


</style>
